<template>
  <div class="about">
    <div class="image_container">
      <img :src="imageList[defultIndex]"/>
    </div>
    <div class="image_list_container">
      <div class="image_list_left"
      @click="onClickLeft">
        《
      </div>
      <div class="image_list_center">
        <div class="imgae_list_center_wrapper"
        ref="wrapper">
          <img v-for="(item,index) in imageList"
          :key="index"
          :src="item"
          ref="image"
          :class="{'image_active':defultIndex===index}"
          @mouseenter="onMouseEnter(index)"/>
        </div>
      </div>
      <div class="image_list_right"
      @click="onClickRight">
        》
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imageList:["http://localhost:8080/img/zipai.jpg",
                "http://localhost:8080/img/6.jpg",
                "http://localhost:8080/img/2.jpg",
                "http://localhost:8080/img/1.jpg",
                "http://localhost:8080/img/9.jpg",
                "http://localhost:8080/img/3.jpg",
                "http://localhost:8080/img/4.jpg",
                "http://localhost:8080/img/5.jpg",
                "http://localhost:8080/img/7.jpg",
                "http://localhost:8080/img/15.jpg",
                "http://localhost:8080/img/16.jpg"],
      defultIndex:0
    }
  },
  methods:{
    onClickRight(){
      this.defultIndex+=3;
      //超出，但是不满一屏
      if(this.defultIndex >= this.imageList.length){
        this.defultIndex=this.imageList.length-1;
      }
      console.log(this.defultIndex)
      var tempImages = this.$refs.image;
      tempImages[this.defultIndex].scrollIntoView({ behavior:"smooth",inline: "start"})
    },
    onClickLeft(){
      this.defultIndex-=3;
      if(this.defultIndex <= 0){
        this.defultIndex = 0;
      }
      var tempImages = this.$refs.image;
      tempImages[this.defultIndex].scrollIntoView({ behavior:"smooth",inline: "end"})
    },
    onMouseEnter(index){
      this.defultIndex = index
    }
  },
  mounted(){
    console.log(this.$route)
  }
}
</script>

<style scoped>
.image_container
{
  width: 360px;
  height: 360px;
  border: 1px solid black;
}

.image_container img
{
  width: 360px;
  /* height: ; */
}

.image_list_container
{
  width: 360px;
  height: 100px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.image_list_left, .image_list_right
{
  width: 10%;
  height: 100%;
  background-color: yellow;
}

.image_list_center
{
  width: 80%;
  height: 100%;
  background-color: pink;
  overflow: scroll;
}

.imgae_list_center_wrapper
{
  height: 100px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.imgae_list_center_wrapper img
{
  width: 33%;
  height: 100px;
}

.image_active
{
  border: 1px  solid red;
}
</style>
